<!--  -->
<template>
  <div class="present-page">
    <van-sticky>
      <c-title :hide="false" text='转赠明细'></c-title>
      <van-tabs v-model="active" @click="presentTab" line-width="15" title-inactive-color="#00001C" color="var(--themeBaseColor)" title-active-color="var(--themeBaseColor)">
        <block v-for="(item,index) in presentArr" :key="index">
          <van-tab :title="item.name"></van-tab>
        </block>
      </van-tabs>
    </van-sticky>
    
    <div class="present-list" v-if="presentArr[active] && presentArr[active].goodsList.length > 0">
      <block v-for="(item,index) in presentArr[active].goodsList" :key="index">
        <goods-item :item="item" :goodIndex="index" className="present">
          <template v-slot:member>
            <div class="flex present">
              <h4>{{item.created_at}}</h4>
              <h5>{{active == 1?'转赠会员':'受赠会员'}}ID：{{item.member_id}}</h5>
            </div>
          </template>
          <template v-slot:amount>
            <div class="sum" >x{{item.total}}</div>
          </template>
        </goods-item>
      </block>
    </div>
    <van-empty description="暂无数据" v-else/>
    <div class="mb54"></div>
  </div>
</template>
<script>
import presentList_controller from "./presentList_controller";
export default presentList_controller;
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.mb54 {
  height: 54px;
  clear: both;
}
.present-page ::v-deep .van-tabs__line {
  bottom:21px;
}
.present-list {
  margin:10px 12px 0 12px;
  .present {
    font-size: 13px;
    font-weight: 400;
    color: #6E6E79;
    line-height: 13px;
    flex-direction: column;
    text-align: left;
    h4 {
      padding:0 0 7px 0;
      font-weight: 400;
    }
    h5 {
      font-weight: 400;
    }
    
  }
  
}
</style>